<template>
    <div style="width: 100%; height: 100%;">
      <div style="width:100%; height: 10%">
        <span style="margin-left: 120px;margin-right: 10px">输入要查询的岗位类别</span>
        <el-select v-model="value" placeholder="请选择" style="margin: 0 auto">
          <el-option
              v-for="item in categories"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div id="chart-container" style="width: 100%; height: 90%;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";

export default {
  name: 'jobStatistics',
  methods:{
    fetchSalaries(){
      axios.get('/api/job/getSalaries').then(resp=>{
        // 处理返回的数据，将其转换为饼图所需的格式
        const salaries = resp.data;
        const salaryRanges = {
          '5000-5999': 0,
          '6000-6999': 0,
          '7000-7999': 0,
          '8000-8999': 0,
          '9000-9999': 0
        };
        salaries.forEach(salary => {
          if (salary >= 5000 && salary < 6000) {
            salaryRanges['5000-5999']++;
          } else if (salary >= 6000 && salary < 7000) {
            salaryRanges['6000-6999']++;
          } else if (salary >= 7000 && salary < 8000) {
            salaryRanges['7000-7999']++;
          } else if (salary >= 8000 && salary < 9000) {
            salaryRanges['8000-8999']++;
          } else if (salary >= 9000 && salary < 10000) {
            salaryRanges['9000-9999']++;
          }
        });
        // 更新饼图的数据
        this.option.series[0].data = Object.entries(salaryRanges).map(([name, value]) => ({
          name,
          value
        }));
        this.myChart.setOption(this.option);
      })
    }
  },
  data() {
    return {
      chartDom: null,
      myChart: null,
      option: {
        title: {
          text: '薪资待遇统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [] // 初始化为空数组
          }
        ]
      }
    };
  },
  mounted() {
    this.fetchSalaries();
    this.chartDom = document.getElementById('chart-container');
    this.myChart = echarts.init(this.chartDom);
    this.option && this.myChart.setOption(this.option);
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
};
</script>

<style>
/* 这里可以添加页面的样式相关设置，如果有需要的话 */
</style>
